<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-10 22:56:03
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-18 22:18:32
 * @FilePath: /chat-ai-plus/src/components/Popup/Popup.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE, 
-->
<template>
  <view class="section pitch_default">
    <view class="row t_center">
      <view class="h3">{{ $t('instruct.heading') }}</view>
    </view>
    <view class="row">
      <u-form :model="formState" :rule="rules" ref="formRef">
        <u-form-item
          class="form-item"
          prop="question"
          :label="$t('instruct.form.question.label')"
          labelPosition="top"
        >
          <u-textarea
            class="mt_xs"
            v-model="formState.question"
            :placeholder="$t('instruct.form.question.placeholder')"
          ></u-textarea>
        </u-form-item>

        <u-form-item
          class="form-item"
          prop="chatgptAnswer"
          :label="$t('instruct.form.answer.label')"
          labelPosition="top"
        >
          <u-textarea
            class="mt_xs"
            v-model="formState.chatgptAnswer"
            :placeholder="$t('instruct.form.answer.placeholder')"
          >
          </u-textarea>
        </u-form-item>

        <u-form-item class="mt_default">
          <u-button
            type="primary"
            :text="$t('instruct.form.submit')"
            shape="circle"
            @click="handleSubmit"
          ></u-button>
        </u-form-item>
      </u-form>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import useInstructionStore from '@/store/modules/instruction';
import { omit } from 'lodash-es';
import { onLoad } from '@dcloudio/uni-app';
import useChatStore from '@/store/modules/chat';

export default defineComponent({
  name: 'Instruct',

  setup(_, {emit}) {
    const { t } = useI18n();
    const instructionStore = useInstructionStore();
    const chatStore = useChatStore();
    const formRef = ref();
    const formState = ref({
      id: '',
      question: '',
      chatgptAnswer: '',
      status: 0,
      version: chatStore.currentModel.version,
    });

    const rules = {
      question: [
        {
          required: true,
          errorMessage: t('instruct.form.question.placeholder'),
          trigger: ['blur', 'change'],
        },
      ],
      chatgptAnswer: [
        {
          required: true,
          errorMessage: t('instruct.form.answer.placeholder'),
          trigger: ['blur', 'change'],
        },
      ],
    };

    const handleSubmit = () => {
      uni.showLoading({ mask: true });

      if (formState.value.id) {
        instructionStore.updateInstruction(formState.value, chatStore.currentModel.version).then(() => {
          uni.hideLoading();
          // uni.navigateBack({
          //   delta: 1,
          // });
          emit('submit')
        });
      } else {
        instructionStore
          .createInstruction(omit(formState.value, ['id']), chatStore.currentModel.version)
          .then(() => {
            uni.hideLoading();
            // uni.navigateBack({
            //   delta: 1,
            // });
            emit('submit')
          });
      }
    };

    onLoad(({ id }) => {
      if (!id) {
        return;
      }

      const instruction = instructionStore.instructionList.find(
        item => item.id == id
      );
      if (instruction) {
        const { id, question, chatgptAnswer, status } = instruction;

        formState.value = {
          id,
          question,
          chatgptAnswer,
          status,
        };
      }
    });

    return {
      formState,
      rules,
      formRef,
      handleSubmit,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.popup-container {
  width: 420px;
  padding: map-get($spaces, lg);
  border-radius: map-get($radii, lg);
 //  background: url('./static/images/login-bg.png') center center/cover no-repeat;

  .image-box {
    padding: $space;
    border-radius: map-get($radii, lg);
    background: $white-color;
  }

  .hint {
    font-size: 12px;
  }

  .close-btn {
    position: absolute;
    top: map-get($spaces, xs);
    right: map-get($spaces, xs);
    width: 50px;
    border: none;
    background: none;
  }
}

.form-item {
  background: $white-color;
  border-radius: $radius;
  padding: map-get($spaces, sm);
  :deep(.u-form-item__body) {
    padding: unset !important;
  }
  :deep(.u-form-item__body__left) {
    width: unset !important;
  }
  & + .form-item {
    margin-top: $space;
  }
}
</style>
